<template>
  <div class="monitor-list-elevator-item-detail-content">  
    <el-row type="flex" justify="space-between">
      <el-row type="flex" align="middle">
        <span class="title-1">经典监控</span>
        <i class="el-icon-arrow-right"/>
        <span class="title-2">单体状态</span>
      </el-row>
      <el-row class="back-parent" type="flex" align="middle" justify="center" @click.native="goBack">
        <span class="back-parent-text">返回上级</span>
      </el-row>
    </el-row>

    <el-row type="flex" align="middle">
      <span class="elevator-detail-num-title">电梯编号：</span>
      <span class="elevator-detail-num">L1</span>
    </el-row>

    <div class="elevator-detail-div">
      <el-row class="elevator-detail-title-row" type="flex" align="middle">
        <span class="elevator-detail-title">概况</span>
      </el-row>

      <el-row type="flex" align="middle" class="elevator-detail-item-row">
        <el-col :span="6">
          <span class="elevator-detail-item-title">电梯名称：</span>
          <span class="elevator-detail-item">大门口电梯</span>
        </el-col>
        <el-col :span="6">
          <span class="elevator-detail-item-title">国家：</span>
          <span class="elevator-detail-item">中国</span>
        </el-col>
        <el-col :span="6">
          <span class="elevator-detail-item-title">城市：</span>
          <span class="elevator-detail-item">上海</span>
        </el-col>
        <el-col :span="6">
          <span class="elevator-detail-item-title">地址：</span>
          <span class="elevator-detail-item">长宁区中山广场</span>
        </el-col>
      </el-row>

      <el-row type="flex" align="middle" class="elevator-detail-item-row">
        <el-col :span="6">
          <span class="elevator-detail-item-title">投保公司：</span>
          <span class="elevator-detail-item">中国人寿</span>
        </el-col>
        <el-col :span="6">
          <span class="elevator-detail-item-title">安装日期：</span>
          <span class="elevator-detail-item">2019-11-28</span>
        </el-col>
        <el-col :span="6">
          <span class="elevator-detail-item-title">维护人员：</span>
          <span class="elevator-detail-item">134234532</span>
        </el-col>
        <el-col :span="6">
          
        </el-col>
      </el-row>

      <el-row class="elevator-detail-title-row" type="flex" align="middle">
        <span class="elevator-detail-title">数据统计</span>
      </el-row>

      <el-row type="flex" align="middle" class="elevator-detail-item-row">
        <el-col :span="6">
          <span class="elevator-detail-item-title">总运行时间：</span>
          <span class="elevator-detail-item">12334</span>
        </el-col>
        <el-col :span="6">
          <span class="elevator-detail-item-title">上行运行时间：</span>
          <span class="elevator-detail-item">00</span>
        </el-col>
        <el-col :span="6">
          <span class="elevator-detail-item-title">下行运行时间：</span>
          <span class="elevator-detail-item">32</span>
        </el-col>
        <el-col :span="6">
          <span class="elevator-detail-item-title">故障时间：</span>
          <span class="elevator-detail-item">21</span>
        </el-col>
      </el-row>

      <el-row type="flex" align="middle" class="elevator-detail-item-row">
        <el-col :span="6">
          <span class="elevator-detail-item-title">待机时间：</span>
          <span class="elevator-detail-item">21</span>
        </el-col>
        <el-col :span="6">
          <span class="elevator-detail-item-title">速度：</span>
          <span class="elevator-detail-item">21</span>
        </el-col>
        <el-col :span="6">
        </el-col>
        <el-col :span="6">
        </el-col>
      </el-row>

      <el-row class="elevator-detail-title-row" type="flex" align="middle">
        <span class="elevator-detail-title">运行状态</span>
      </el-row>

      <el-row type="flex" align="middle" class="elevator-detail-run-item-row">
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">下行方向</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">上行方向</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">故障</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">双向运行</span>
          </el-row>
        </el-col>
      </el-row>

      <el-row type="flex" align="middle" class="elevator-detail-run-item-row">
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">自动运行</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">连续运行</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">待机无故障</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">roin</span>
          </el-row>
        </el-col>
      </el-row>

      <el-row type="flex" align="middle" class="elevator-detail-run-item-row">
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">电机三角形运行</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">电机星形运行</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">远程启停控制</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" align="middle">
          <div class="elevator-detail-run-item" />
          <span class="elevator-detail-run-item-text">本地启停控制</span>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'MonitorDetail',
  components:{
    
	},
  data() {
      
      return {
        
      };
    },
    methods: {
      goBack() {
        console.log("MonitorDetail goBack")
        this.$router.go(-1);
      }
    },
    mounted() {
      
    },
    watch: {
    }
}
</script>

<style lang="scss" scoped>
.monitor-list-elevator-item-detail-content {
  width: 100%;
  .title-1 {
    font-size: 14px;
    color: white;
    font-weight: bold;
  }
  .title-2 {
    font-size: 14px;
    color: lightgray;
  }

  .el-icon-arrow-right {
    color: white;
    margin-left: 10px;
    margin-right: 10px;
  }
  .back-parent {
    width: 100px;
    height: 40px;
    background: #304156;
    .back-parent-text {
      font-size: 14px;
      color: lightgray;
    }
  }
  .elevator-detail-num-title {
    font-size: 16px;
      color: lightgray;
      margin-top: 20px;
      font-weight: bold
  }

  .elevator-detail-num {
      font-size: 14px;
      color: lightgray;
      margin-top: 20px;
  }

  .elevator-detail-title {
    font-size: 20px;
      color: lightgray;
      font-weight: bold
  }

  .elevator-detail-title-row{
    height: 60px;
    border-bottom: 1px solid rgb(177, 176, 176);
  }

  .elevator-detail-div {
    background: #131417;
    margin-top: 10px;
    border-radius: 10px;
    padding: 20px;
  }

  .elevator-detail-item-title {
    font-size: 14px;
      color: lightgray;
      padding-top: 10px;
  }

  .elevator-detail-item {
    font-size: 14px;
      color: lightgray;
      padding-top: 10px;
  }

  .elevator-detail-item-row {
    height: 40px;
  }

  .elevator-detail-run-item-row {
    height: 30px;

    .elevator-detail-run-item {
      height: 8px;
      border-radius: 4px;
      width: 8px;
      background: lightgray;
    }
    .elevator-detail-run-item-text {
        font-size: 14px;
      color: lightgray;
      margin-left: 5px;
    }
  }

}

</style>